﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="popup.ascx.cs" Inherits="VINETLIFE.Module.popup" %>
<style type="text/css">
    .popup
    {
        position: fixed;
        opacity: 1.7;
        display: block;
        width: 100%;
        top: 0;
        left: 0px;
        border: 1px solid #cecece;
        z-index: 1000;
        background: rgba(0,0,0,0.7);
        height: 100%;
    }
    #background
    {
        position: absolute;
        background: gray;
        left: 0px;
        top: 0px;
    }
    a.close
    {
        text-decoration: none;
        font-size: 33px;
        color: red;
        float: left;
        position: absolute;
        z-index: 999;
        right: -25px;
        top: -25px;
        display: block;
        background: url(/images/close.png) no-repeat;
        width: 24px;
        height: 24px;
        background-size: 24px;
    }
    .img-popup
    {
        margin-top: 100px;
        position: relative;
       
    }
    .posison
    {
        position: relative;
        width: 700px;
        height: 500px;
        margin: 0 auto;
    }
    .close-popup
    {
        position: relative;
        width: 700px;
        height: 500px;
        margin: 0 auto;
    }
</style>
<script src="/js/popup.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".popup").on();

        $("#button1").click(function (e) {
            openPopup();
        });

        $(".close").click(function (e) {
            closePopup();
            e.preventDefault();
        });

        $("#background").click(function () {
            closePopup();
        });

    });

    function openPopup() {
        var dheight = document.body.clientHeight;
        var dwidth = document.body.clientWidth;

        $("#background").width(dwidth).height(dheight);

        $("#background").fadeTo("slow", 0.8);

        var $popup1 = $("#popup1");
        $popup1.css("top", (dheight - $popup1.height()) / 2);
        $popup1.css("left", (dwidth - $popup1.width()) / 2);

        $popup1.fadeIn();
    }
    function closePopup() {
        $("#background").fadeOut();
        $(".popup").hide();
    }
</script>
<!-- POPUP CONTENT -->
<div id="popup1" class="popup">
    <div>
        <div class="close-popup">
            <a href="#" class="close" /></a>
            <asp:HyperLink ID="hplPopup" Target="_blank" runat="server">
            <div align="center" class="img-popup">
                <img src="/Media/popup.png" />
            </div>
            </asp:HyperLink>
        </div>
        <!-- END POPUP CONTENT -->
    </div>
</div>
<div id="background">
</div>
